<template>
  <!--  卡片区域  -->
  <n-card>
    <!--    工具栏    -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <!--  新建按钮    -->
      <n-button @click="showModal = true" type="info" style="width: 80px; height: 30px">
        <n-icon size="18">
          <add/>
        </n-icon>
        新建
      </n-button>
      <!--刷新-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">
            <n-icon>
              <refresh-sharp />
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--密度-->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular />
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
      <!--列设置-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-popover trigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width:22px; height:32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular />
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
    <!--    数据表格    -->
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
        :size="densityValue"
        :loading="loading"
        scroll-x="2030"
    />
  </n-card>
  <!--  新建模态框  -->
  <n-modal v-model:show="showModal" preset="card" :style="bodyStyle" title="添加分行" :segmented="segmented">
    <!--表单-->
    <n-form :rules="rules" :model="formValue">
      <n-form-item path="user.name" label="分行简称">
        <n-input
            v-model:value="formValue.user.name"
            placeholder="请输入分行简称"
            clearable
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.fullName" label="分行全称">
        <n-input
            v-model:value="formValue.user.fullName"
            placeholder="请输入分行全称"
            clearable
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.tel" label="联系电话" style="width: 49%; float: left;">
        <n-input
            v-model:value="formValue.user.tel"
            placeholder="请输入联系电话"
            clearable
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.area" label="所在地区" style="width: 49%; float: right;">
        <n-cascader
            v-model:value="areacodeValue"
            placeholder="请选择所在地区"
            clearable
            :options="options"
            :check-strategy="checkStrategyIsChild ? 'child' : 'all'"
        />
      </n-form-item>
      <n-form-item style="width: 100%;" path="user.address" label="详细地址">
        <n-input
            v-model:value="formValue.user.address"
            placeholder="请输入详细地址"
            clearable
        >
        </n-input>
      </n-form-item>
      <n-form-item label="分行性质" style="width: 32%; float: left;">
        <n-select
            v-model:value="natureValue"
            :options="nature"
            placeholder="请选择分行性质"
            clearable
        />
      </n-form-item>
      <n-form-item label="分行规模" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="staffsizeValue"
            :options="staffSize"
            placeholder="请选择分行规模"
            clearable
        />
      </n-form-item>
      <n-form-item label="所属行业" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="industryValue"
            :options="industryId"
            placeholder="请选择分行规模"
            clearable
        />
      </n-form-item>
      <n-form-item label="加班情况" style="width: 32%; float: left;">
        <n-select
            v-model:value="workovertimeValue"
            :options="workOvertime"
            placeholder="请选择加班情况"
            clearable
        />
      </n-form-item>
      <n-form-item label="休息时间" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="resttimeValue"
            :options="restTime"
            placeholder="请选择休息时间"
            clearable
        />
      </n-form-item>
      <n-form-item label="工作时间" style="width: 32%; float: right; margin-left: 2%;">
        <n-time-picker
            v-model:formatted-value="worktimeValue1"
            value-format="HH:mm:ss"
            placeholder="开始"
            clearable
        />
        —
        <n-time-picker
            v-model:formatted-value="worktimeValue2"
            value-format="HH:mm:ss"
            placeholder="结束"
            clearable
        />
      </n-form-item>
      <n-form-item path="user.weight" label="推荐值(0为未推荐)" style="width: 45%; ">
        <n-input-number
            v-model:value="formValue.user.weight"
            placeholder="请输入推荐值"
            clearable
        />
      </n-form-item>
      <n-form-item path="user.introduce" label="分行简介">
        <n-input
            v-model:value="formValue.user.introduce"
            type="textarea"
            placeholder="请输入分行简介"
            clearable
        >
        </n-input>
      </n-form-item>
      <n-form-item label="分行logo">
        <n-upload list-type="image-card">
          <n-space vertical>
            <n-icon size="18">
              <add/>
            </n-icon>
            上传图片
          </n-space>
        </n-upload>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>
  <!--  编辑模态框-->
  <n-modal v-model:show="showEditModal" preset="card" :style="bodyStyle" title="编辑分行" :segmented="segmented">
    <n-form :rules="rulesEdit" :model="formEditValue">
      <n-form-item path="user.name" label="分行简称">
        <n-input
            clearable
            v-model:value="formEditValue.user.name"
            placeholder="请输入分行简称"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.fullName" label="分行全称">
        <n-input
            clearable
            v-model:value="formEditValue.user.fullName"
            placeholder="请输入分行全称"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.tel" label="联系电话" style="width: 49%; float: left;">
        <n-input
            clearable
            v-model:value="formEditValue.user.tel"
            placeholder="请输入联系电话"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.area" label="所在地区" style="width: 49%; float: right;">
        <n-cascader
            v-model:value="areacodeEditValue"
            placeholder="请选择所在地区"
            clearable
            :options="options"
            :check-strategy="checkStrategyIsChild ? 'child' : 'all'"
        />
      </n-form-item>
      <n-form-item style="width: 100%;" path="user.address" label="详细地址">
        <n-input
            clearable
            v-model:value="formEditValue.user.address"
            placeholder="请输入详细地址"
        >
        </n-input>
      </n-form-item>
      <n-form-item label="分行性质" style="width: 32%; float: left;">
        <n-select
            v-model:value="natureEditValue"
            :options="nature"
            placeholder="请选择分行性质"
            clearable
        />
      </n-form-item>
      <n-form-item label="分行规模" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="staffsizeEditValue"
            :options="staffSize"
            placeholder="请选择分行规模"
            clearable
        />
      </n-form-item>
      <n-form-item label="所属行业" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="industryEditValue"
            :options="industryId"
            placeholder="请选择所属行业"
            clearable
        />
      </n-form-item>
      <n-form-item label="加班情况" style="width: 32%; float: left;">
        <n-select
            v-model:value="workovertimeEditValue"
            :options="workOvertime"
            placeholder="请选择加班情况"
            clearable
        />
      </n-form-item>
      <n-form-item label="休息时间" style="width: 32%; float: left; margin-left: 2%;">
        <n-select
            v-model:value="resttimeEditValue"
            :options="restTime"
            placeholder="请选择休息时间"
            clearable
        />
      </n-form-item>
      <n-form-item label="工作时间" style="width: 32%; float: right; margin-left: 2%;">
        <n-time-picker
            v-model:formatted-value="worktimeEditValue1"
            value-format="HH:mm:ss"
            placeholder="开始"
            clearable
        />
        —
        <n-time-picker
            v-model:formatted-value="worktimeEditValue2"
            value-format="HH:mm:ss"
            placeholder="结束"
            clearable
        />
      </n-form-item>
      <n-form-item style="width: 45%" label="推荐值(0为未推荐)">
        <n-input-number
            v-model:value="formEditValue.user.weight"
            placeholder="请输入"
            :min="0"
        />
      </n-form-item>
      <n-form-item path="user.introduce" label="分行简介">
        <n-input
            clearable
            v-model:value="formEditValue.user.introduce"
            type="textarea"
            placeholder="请输入分行简介"
        >
        </n-input>
      </n-form-item>
      <n-form-item label="分行logo">
        <n-upload list-type="image-card" action="https://recruit.aicase.xyz/storage/images/logo">
          <n-space vertical>
            <n-icon size="18">
              <add/>
            </n-icon>
            上传图片
          </n-space>
        </n-upload>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancelEdit">取消</n-button>
        <n-button type="info" @click="sureEdit">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import {defineComponent, h, ref, reactive, onMounted} from 'vue'
import {NButton, NForm, NFormItem, NInput, NFlex, NIcon, NImage, NTag, NGradientText, NText} from "naive-ui";
import { Add } from "@vicons/ionicons5"
import { RefreshSharp } from "@vicons/material"
import { AutoFitHeight20Regular ,Settings20Regular} from "@vicons/fluent"
import { LeftOutlined , RightOutlined} from "@vicons/antd"
import { description } from '@/js/description'
import { GetFirm, AddFirm, UpdateFirm, DeleteFirm } from "@/api/Firm";

export default defineComponent({
  components: {
    Add,
    RefreshSharp,
    AutoFitHeight20Regular,
    Settings20Regular,
    LeftOutlined,
    RightOutlined,
    description,
  },
  setup(){
    const message = window.$message
    const dialog = window.$dialog
    // 加载
    const loading = ref(false)


    /*  数据表格  */
    // 创建表格列模版
    const createColumns = () => {
      return [
        {
          title: "序号",
          key: "index",
          width: 60,
          render(row, index) {
            return index + 1;
          }
        },
        {
          title: "分行简称",
          key: "name",
          width: 180,
        },
        {
          title: "分行全称",
          key: "fullName",
          ellipsis: {
            tooltip: {
              width: 180,
            },
          }
        },
        {
          title: "分行logo",
          key: "logo",
          render(row) {
            return h(NImage, {
              src: row.logoUrl ? row.logoUrl : 'https://recruit.aicase.xyz/storage/images/logo'+row.id,
              width: 30,
              alt: ' ',
            });
          },
          width: 100,
          ellipsis: true
        },
        {
          title: "所属行业",
          key: "industry",
          render(row) {
            switch (row.industry) {
              case  "0c7db0e5":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "银行" }
                )
              case "5a538ce0":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "咨询" }
                )
              case "623bf0cf":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "保险" }
                )
              case "66aaec7f":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "互联网金融" }
                )
              case "797c5533":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "基金" }
                )
              case "0348d077":
                return h(
                    NText,
                    {
                      strong: true,
                      size: "small",
                    },
                    { default: () => "-" }
                )
            }
          },
          width: 120,
          ellipsis: true
        },
        {
          title: "分行性质",
          key: "nature",
          width: 140,
          ellipsis: true
        },
        {
          title: "联系电话",
          key: "phone",
          width: 120,
          ellipsis: true
        },
        {
          title: "分行规模",
          key:'scale',
          width: 120,
          ellipsis: true
        },
        {
          title: "分行简介",
          key:'introduce',
          ellipsis: {
            tooltip: {
              width: 160,
            },
          }
        },
        {
          title: "工作时间",
          key: 'workTime',
          width: 150,
          ellipsis: true
        },
        {
          title: "休息时间",
          key: "restTime",
          width: 100,
          ellipsis: true
        },
        {
          title: "加班时间",
          key: "workOvertime",
          width: 100,
          ellipsis: true
        },
        {
          title: "地址详情",
          key: "address",
          ellipsis: {
            tooltip: {
              width: 160,
            },
          }
        },
        {
          title: "推荐值",
          key: "value",
          width: 80,
          ellipsis: true
        },
        {
          title: "编辑时间",
          key: "editTime",
          width: 200,
          ellipsis: true
        },
        {
          title: "操作",
          key: "actions",
          width:100,
          fixed:'right',
          render(row) {
            return h(
                NFlex,
                {
                  size: "small",
                },
                {
                  default: () => [
                    h(
                        NButton,
                        {
                          text: true,
                          color: "#3FA2FE",
                          onClick: () => {
                            console.log(row)
                            showEditModal.value = true
                            formEditValue.value.user.name = row.name
                            formEditValue.value.user.fullName = row.fullName
                            formEditValue.value.user.tel = row.phone
                            formEditValue.value.user.address = row.address
                            areacodeEditValue.value = row.area.ext_path
                            natureEditValue.value = row.nature
                            staffsizeEditValue.value = row.scale
                            industryEditValue.value = row.industry
                            workovertimeEditValue.value = row.workOvertime
                            resttimeEditValue.value = row.restTime
                            worktimeEditValue1.value = row.workTime.substring(0,8)
                            worktimeEditValue2.value = row.workTime.substring(9,17)
                            formEditValue.value.user.weight = row.value
                            formEditValue.value.user.introduce = row.introduce
                            editId.value = row.id
                            editLogo.value = row.logo
                          }
                        },
                        { default: () => "编辑" }
                    ),
                    h(
                        NButton,
                        {
                          text: true,
                          color: "#3FA2FE",
                          onClick: () => {
                            dialog.warning({
                              title: '删除记录',
                              content: '确定删除该记录吗？',
                              positiveText: '确定',
                              negativeText: '取消',
                              maskClosable: false,
                              onNegativeClick: () => {
                                message.success('取消删除')
                              },
                              onPositiveClick: () => {
                                message.success('确定删除')
                                GetFirm().then(j => {
                                  const content = j.data.list
                                  content.forEach((item) => {
                                    if (item.name === row.name){
                                      row.id = item.id
                                      DeleteFirm(row.id).then(res => {
                                        if (res.code === 0) {
                                          message.success(res.message)
                                          // 更新数据
                                          window.location.reload()
                                        } else {
                                          message.error(res.message)
                                        }
                                      })
                                    }
                                  })
                                })
                              }
                            })
                          }
                        },
                        { default: () => "删除" }
                    )
                  ]
                }
            )
          }
        }
      ];
    };
    // 调用列模版
    const columns = createColumns()
    //表格数据
    let data = reactive([]);

    //获取用户列表数据
    let getData = ()=>{
      GetFirm().then(res=>{
        const content = res.data.list
        console.log(content)
        // 转换数据库时间格式为标准时间格式方法
        let getDate = (time)=> {
          const dateTime = new Date(time)
          const year = dateTime.getFullYear()
          let month = (dateTime.getMonth() + 1)
          month =  month >= 10 ? month: `0${month}`
          let date = dateTime.getDate()
          date = date >= 10? date : `0${date}`
          let hour = dateTime.getHours()
          hour = hour >= 10? hour : `0${hour}`
          let minute = dateTime.getMinutes()
          minute = minute >= 10? minute : `0${minute}`
          let second = dateTime.getSeconds()
          second = second >= 10? second : `0${second}`
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        }
        content.forEach((item, index) => {
          data.push({
            id: item.id,
            key: index,
            name: item.name,
            fullName: item.fullName,
            logo: item.logo,
            logoUrl: item.logoUrl,
            industry: item.industryId ? item.industryId : '-',
            nature: item.nature,
            phone: item.tel,
            scale: item.staffSize,
            areaId: item.areaId,
            area: item.area,
            introduce: item.introduce,
            workTime: item.workTime,
            restTime: item.restTime,
            workOvertime: item.workOvertime,
            address: item.address,
            value: item.weight,
            editTime: getDate(item.updatedAt),
          })
        })
        total.value = data.length
        console.log(data)
      })
    }
    //调用数据
    getData()
    // 总条数
    const total = ref(data.length);
    // 总页数
    const page = ref(Math.ceil(data.length / 10));
    // 当前所在页数
    const currentPage = ref(1);
    // 分页
    const pagination = {
      prev:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value --
              }
            },
            {
              default: () => h(LeftOutlined)
            }
        )
      },
      next:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value ++
              }
            },
            {
              default: () => h(RightOutlined)
            }
        )
      },
      prefix:()=>{
        const range = [currentPage.value * 10 - 9, currentPage.value * 10];
        if (currentPage.value <= 1) {
          return `第 1-${range[1]} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value >= page.value) {
          return `第 ${range[0]} 条到第 ${total.value} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value > 1 && currentPage.value < page.value) {
          return `第 ${range[0]} 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;
        }
      },
    }

    /*  工具栏  */
    // 模态框
    /*新建、编辑*/
    // 显示新建-模态框
    const showModal = ref(false)
    // 显示编辑-模态框
    const showEditModal = ref(false)
    // 模态框样式
    const bodyStyle = {
      width: "640px",
    }
    const segmented = {
      content: "soft",
      footer: "soft"
    }
    // 取消新建-模态框
    function cancel() {
      showModal.value = false
    }
    // 取消编辑-模态框
    function cancelEdit() {
      showEditModal.value = false
    }

    // 新建-确定提交
    function sure() {
      let formData = {
        name: formValue.value.user.name,
        fullName: formValue.value.user.fullName,
        tel: formValue.value.user.tel,
        areaId: areacodeValue.value,
        address: formValue.value.user.address,
        nature: natureValue.value,
        staffSize: staffsizeValue.value,
        industryId: industryValue.value,
        workOvertime: workovertimeValue.value,
        restTime: resttimeValue.value,
        workTime: worktimeValue1.value + '-' + worktimeValue2.value,
        weight: formValue.value.user.weight,
        introduce: formValue.value.user.introduce,
        logo: '-'
      }
      // 添加到数据库
      AddFirm(formData).then(res => {
        console.log(res)
        if (res.code === 0) {
          message.success(res.message)
          // 刷新数据
          window.location.reload()
          cancel()
          window.location.reload()
        } else {
          message.error(res.message)
        }
      })
    }

    //编辑-id
    let editId = ref()
    let editLogo = ref()

    // 编辑-确定提交
    function sureEdit() {
      let formData = {
        name: formEditValue.value.user.name,
        fullName: formEditValue.value.user.fullName,
        tel: formEditValue.value.user.tel,
        areaId: areacodeEditValue.value,
        areaOptions: areacodeEditValue.value,
        address: formEditValue.value.user.address,
        nature: natureEditValue.value,
        staffSize: staffsizeEditValue.value,
        industryId: industryEditValue.value,
        workOvertime: workovertimeEditValue.value,
        restTime: resttimeEditValue.value,
        workTime: worktimeEditValue1.value + '-' + worktimeEditValue2.value,
        weight: formEditValue.value.user.weight,
        introduce: formEditValue.value.user.introduce,
        id: editId.value,
        logo: editLogo.value,
      }

      // 更新后添加到数据库
      UpdateFirm(formData).then(res => {
        console.log(res)
        if (res.code === 0) {
          message.success(res.message)
          window.location.reload()
        }else {
          message.error(res.message)
        }
      })
      showEditModal.value = false
      // 调用数据 获取更新后的数据
      getData()
    }

    // 新建-表单信息
    const formValue = ref({
      user: {
        name: "",
        fullName: "",
        tel: "",
        areaId: "",
        address: "",
        nature: "",
        staffSize: "",
        industryId: "",
        workOvertime: "",
        restTime: "",
        workTime:"",
        weight: "",
        introduce: "",
        logo:"",
      }
    })
    // 编辑-表单信息
    const formEditValue = ref({
      user: {
        name: "",
        fullName: "",
        tel: "",
        areaOptions:"",
        address: "",
        nature: "",
        staffSize: "",
        industryId: "",
        workOvertime: "",
        restTime: "",
        workTime:"",
        weight: "",
        introduce: "",
        logo: "",
        areaId: "",
      }
    })

    // 新建-所在地区
    const areacodeValue= ref()
    const areacodeEditValue = ref()

    // 新建-分行性质
    const natureValue = ref()
    // 编辑-分行性质
    const natureEditValue = ref()
    // 分行性质列表
    const nature = ref([
      {label: "私营/民营企业", value: "私营/民营企业"},
      {label: "国有企业", value: "国有企业"},
      {label: "合资企业", value: "合资企业"},
      {label: "其他", value: "其他"},
    ])
    // 新建-分行规模
    const staffsizeValue = ref()
    // 编辑-分行规模
    const staffsizeEditValue = ref()
    // 分行规模列表
    const staffSize = ref([
      {label: "0-20人", value: "0-20人"},
      {label: "20-99人", value: "20-99人"},
      {label: "100-499人", value: "100-499人"},
      {label: "500-999人", value: "500-999人"},
      {label: "1000-9999人", value: "1000-9999人"},
      {label: "10000人以上", value: "10000人以上"},
    ])
    // 新建-所属行业
    const industryValue = ref()
    // 编辑-所属行业
    const industryEditValue = ref()
    // 新建-所属分行
    const industryId = ref([
      {label: "银行", value: "0c7db0e5"},
      {label: "咨询", value: '5a538ce0'},
      {label: "保险", value: "623bf0cf"},
      {label: "互联网金融", value: '66aaec7f'},
      {label: "基金", value: "797c5533"},
      {label: "信托", value: "0348d077"},
      {label: "证券/期货", value: "0348d077"},
    ])
    // 新建-加班时间
    const workovertimeValue = ref()
    // 编辑-加班时间
    const workovertimeEditValue = ref()
    // 加班时间列表
    const workOvertime = ref([
      {label: "不加班", value: "不加班"},
      {label: "偶尔加班", value: "偶尔加班"},
      {label: "弹性工作", value: "弹性工作"},
    ])
    // 新建-休息时间
    const resttimeValue = ref()
    // 编辑-休息时间
    const resttimeEditValue = ref()
    // 休息时间列表
    const restTime = ref([
      {label: "单休", value: "单休"},
      {label: "双休", value: "双休"},
      {label: "大小周", value: "大小周"},
      {label: "排班顺序", value: "排班顺序"},
    ])

    // 新建-工作时间
    const worktimeValue1 = ref()
    const worktimeValue2 = ref()
    // 编辑-工作时间
    const worktimeEditValue1 = ref()
    const worktimeEditValue2 = ref()

    // 新建验证规则
    const rules = {
      user: {
        name: {
          required: true,
          trigger: "blur",
          message: "请输入用户名！"
        },
      }
    };
    // 编辑验证规则
    const rulesEdit = {
      user: {
        name: {
          required: true,
          trigger: "blur",
          message: "请输入用户名！"
        },
      }
    };

    /*刷新*/
    // 刷新
    function refresh() {
      window.location.reload()
    }
    /*密度*/
    // 密度事件数据
    const densityOptions = [
      {
        label: "默认",
        value: "large"
      },
      {
        label: "中等",
        value: "medium"
      },
      {
        label: "紧密",
        value: "small",
      },
    ]
    // 默认密度
    const densityValue = ref('medium')

    /*列设置*/
    // 复选框全选
    const allChecked = ref(true)
    // 复选框列表
    const checkboxList = ref([])
    // 列表添加数据
    for (let i = 0;i < columns.length; i++){
      checkboxList.value.push({name: columns[i].title, checked: true})
    }
    // 全选改变事件
    const allChange = ()=>{
      if (allChecked.value) {
        checkboxList.value.forEach(item => {item.checked = true})
      } else {
        checkboxList.value.forEach(item => {item.checked = false})
      }
    }
    // 复选框单个改变事件
    const itemChange = ()=>{
      if (checkboxList.value.every(item => item.checked)) {
        allChecked.value = true
      } else {
        allChecked.value = false
      }
    }

    return {
      // 模态框
      showModal,
      showEditModal,
      bodyStyle,
      segmented,
      cancel,
      cancelEdit,
      sure,
      sureEdit,
      formValue,
      formEditValue,
      rules,
      rulesEdit,

      //所在地区
      areacodeValue,
      options: description,
      checkStrategyIsChild: ref(true),
      areacodeEditValue,

      natureValue,
      natureEditValue,
      nature,

      staffsizeValue,
      staffsizeEditValue,
      staffSize,

      industryValue,
      industryEditValue,
      industryId,

      workovertimeValue,
      workovertimeEditValue,
      workOvertime,

      resttimeValue,
      resttimeEditValue,
      restTime,


      // 新建-工作时间
      worktimeValue1,
      worktimeValue2,

      worktimeEditValue1,
      worktimeEditValue2,


      // 数据表格
      densityOptions,
      densityValue,
      data,
      columns,
      pagination,
      loading,
      refresh,
      page,
      checkboxList,
      allChecked,
      allChange,
      itemChange,
      editId,
      editLogo,
    }
  }
})
</script>

<style scoped>

</style>

